<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志管理</title>
    <link href="/ui/pc/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/ui/bootstrapIcon/font/bootstrap-icons.min.css">
    <link href="/ui/pc/css/cross.css" rel="stylesheet"/>
    <link href="/ui/pc/css/change.css" rel="stylesheet"/>
    <link href="/ui/pc/css/style.css" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated">
    <form data-form="search">
        <div class="audit-top">
            <span>记录时间</span>
            <span class="input-select" style="width: 360px">
                <input type="hidden" name="beginTime">
                <input type="hidden" name="endTime">
                <input type="text" data-input="during" value="" placeholder="执行周期" readonly/>
                <i class="bi-chevron-down"></i>
            </span>

            <span class="ml-20">关键字</span>
            <span class="input-select">
                <input type="text" name="actionKeyword" value="" placeholder="请输入关键字搜索"/>
            </span>

            <span class="ml-20">用户</span>
            <span class="input-select">
                <input type="text" name="visitorKeyword" value="" placeholder="请输入IP，用户名字搜索"/>
            </span>

            <span class="ml-20">返回码</span>
            <span class="input-select">
                <input type="number" name="responseCode" value="" placeholder="返回码（数字）搜索"/>
            </span>

            <span class="ml-20">返回信息</span>
            <span class="input-select">
                <input type="text" name="responseMessageLike" value="" placeholder="返回信息搜索"/>
            </span>

            <a class="search-btn ml-20" href="javascript:" data-btn="search">搜索</a>
        </div>
    </form>
    <div data-list="content" class="table-con  mt-20">

    </div>

</div>

<script src="/ui/pc/js/jquery.min.js?v=2.1.4"></script>
<script src="/admin/public/util.js"></script>
<script src="/admin/public/moment.js"></script>

<script src="/ui/pc/js/laydate/laydate.js"></script>

<link href="/ui/pc/js/highlight/styles/default.min.css" rel="stylesheet"/>
<script src="/ui/pc/js/highlight/highlight.min.js"></script>
<script src="/ui/pc/js/highlight/languages/json.min.js"></script>
<script src="/admin/log/js/logDetailsDialog.js"></script>

<script>
    const $searchForm = $('[data-form="search"]');
    const $listWarp = $('[data-list="content"]');

    const defBeginTime = moment().subtract(1, "months").format("YYYY-MM-DD hh:mm:ss");
    const defEndTime = moment().format("YYYY-MM-DD hh:mm:ss");

    const $duringWidget = $searchForm.find('[data-input="during"]')
    const $beginTimeInput = $duringWidget.siblings('[name=beginTime]')
    const $endTimeInput = $duringWidget.siblings('[name=endTime]')
    const range = "至";

    $beginTimeInput.val(defBeginTime);
    $endTimeInput.val(defEndTime);

    laydate.render({
        elem: $duringWidget[0],
        type: "datetime",
        value: `${defBeginTime} ${range} ${defEndTime}`,
        range: range,
        max: defEndTime,
        done: value => {
            const [startTime, endTime] = value.split(` ${range} `);
            $beginTimeInput.val(startTime);
            $endTimeInput.val(endTime);
        }
    });


    const listHandler = $.commonList({
        $warp: $listWarp,
        column: [
            {
                title: "模块",
                value: ({controllerName, controllerDescription}) => controllerDescription || controllerName
            },
            {title: "方法", value: ({actionName, actionDescription}) => actionDescription || actionName},
            {title: "执行时间", value: ({beginTime, endTime}) => `${beginTime} ~ ${endTime}`},
            {title: "IP", value: "clientIp"},
            {title: "返回码", value: "responseCode"},
            {title: "返回信息", value: "responseMessage"},
            {
                title: "操作", value: data => {
                    const $detailsBtn = $('<a href="javascript:" class="c-btn btn-gray m5">明细</a>');
                    $detailsBtn.on("click", () => {
                        logDetailsDialog({
                            ...data
                        });
                    });

                    //控制操作按钮
                    const $dom = $('<div></div>');
                    $dom.append($detailsBtn);

                    return $dom;
                }
            },
        ],
        dataSource: (currPage, callback) => {
            const param = $.getFormData($searchForm);

            param.pageIndex = currPage;
            param.pageSize = 10;
            queryVisitLogPage(param, ({Code, Message, Result = [], Total}) => {
                if (Code !== 10000) {
                    return callback(Message, 0);
                }

                return callback(Result, Total, param.pageSize);
            });
        }
    });

    //搜索按钮
    $searchForm.find('[data-btn=search]').on("click", () => {
        listHandler.getPage(1);
    });

    function queryVisitLogPage(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/VisitLog/queryVisitLogPage"
        }, callback)
    }
</script>
</body>
</html>